<template lang="">
    <div>
        <el-dialog
            title="查看合同内容"
            :visible="dialogVisible"
            width="70%"
            @close="close">
            <!-- 
                属性  src=''  pdf路径 
                page   显示第几页

                $event获取当前的pdf文件事件对象
                @num-pages="pageCount = $event"      总页码
			    @page-loaded="currentPage = $event"  当前页码
            -->
            <!-- <p>{{currentPage}}/{{pageCount}}</p> -->
            <!-- 1.展示pdf文件 -->
            <!-- <pdf src="/sxt.pdf" @num-pages="pageCount = $event" @page-loaded="currentPage = $event"></pdf> -->
            <!-- 2.展示所有pdf -->
            <!-- <pdf
                v-for="i in numPages"
                :key="i"
                :src="src"
                :page="i"
                style="display: inline-block; width: 25%"
            ></pdf> -->
            <!-- 3.结合分页展示pdf -->
            <p>{{currentPage}}/{{numPages}}</p>
            <Pagination :pageSize="1" :total="numPages" @getPagination="getPagination"/>
            <el-button @click="print">打印合同</el-button>
            
            <pdf src="/promise.pdf" :page="currentPage" ref="mypdf"></pdf>
        </el-dialog>
    </div>
</template>
<script>
import pdf from 'vue-pdf';
import Pagination from '@/components/Pagination';
var loadingTask = pdf.createLoadingTask('/promise.pdf');

export default {
    props: ['dialogVisible'],
    components: {
        pdf,
        Pagination
    },
    data() {
        return {
            pageCount: 0, // 总页码数
            currentPage: 1, // 当前页码
            src: loadingTask,
            numPages: '',
        }
    },
    mounted() {
        this.src.promise.then(pdf => {
            this.numPages = pdf.numPages;
        });
    },
    methods: {
        // 关闭
        close() {
            console.log('关闭弹框');
            // 通知父组件修改变量去传递给子组件
            this.$emit('changeDialog');
        },
        // 分页
        getPagination(num) {
            this.currentPage = num;
        },
        // 打印合同
        print() {
            this.$refs.mypdf.print();
        }
    },
    
}
</script>
<style lang="">
    
</style>